<template>
  <div>
      <canvas @click="getCode" id="canvas" width="200" height="40"></canvas>
  </div>
</template>
<script>
// 导入写好的获取验证码接口方法
import {getVeriApi} from '@/api/login'
export default {
  created(){},
  mounted(){
    this.getCode();
  },
  methods:{
    // 俩种调用接口的方式 1，promise .then方式
    // getCode(){
    //   // 调用获取验证码接口方法
    //     getVeriApi().then(res=>{
    //       console.log(res,"--获取到的验证码--")
    //     })  
    // },
    // 2，async await方式
    async getCode(){ 
        let res=await getVeriApi()// 调用获取验证码接口方法
         console.log(res,"--获取到的验证码--")
        // 将后台返回的验证码 传入到绘制方法中
        this.drawCode(res.data)
    },
    drawCode(str){ //str---4位验证码 绘制验证码方法
        let mycanvas=document.getElementById("canvas"); //获取canvas元素
        let ctx=mycanvas.getContext("2d"); //获取canvas的上下文
        ctx.clearRect(0,0,200,40); //清空画布
        for(let i=0;i<str.length;i++){
          // 设置字体样式
          ctx.font=`${this.ranDom(30,50)}px 黑体`
          // 设置字体颜色
          ctx.fillStyle=this.ranColor();
          // 绘制字体
          // ctx.fillText(文字，x位置，y位置)
         ctx.fillText(str[i],i*50+this.ranDom(10,20),this.ranDom(20,40))

        }
        // 随机绘制20个干扰点
        for(let j=0;j<20;j++){
          // 设置点的颜色
          ctx.beginPath();//开始绘制
          ctx.strokeStyle=this.ranColor();
          // 开始位置是随机画布上都可以
          let x=this.ranDom(0,200)
          let y=this.ranDom(0,40)
          ctx.moveTo(x,y) // 移动到指定位置
          ctx.lineTo(x+1,y+1)//结束位置
          ctx.stroke()//绘制
        }
        // 绘制10条干扰线
        // for(var k=0;k<10;k++){
        //    // 设置点的颜色
        //   ctx.beginPath();//开始绘制
        //   ctx.strokeStyle=this.ranColor();
        //   // 开始位置是随机画布上都可以 
        //   ctx.moveTo(this.ranDom(0,200),this.ranDom(0,40)) // 移动到指定位置
        //   ctx.lineTo(this.ranDom(0,200),this.ranDom(0,40))//结束位置
        //   ctx.stroke()//绘制
        // }
    },
    //生成a-b的随机数方法 随机数方法
    ranDom(a,b){
      return Math.floor(Math.random()*(b-a+1)+a)
    },
    // 随机颜色方法
    ranColor(){
      return `rgb(${this.ranDom(0,255)},${this.ranDom(0,255)},${this.ranDom(0,255)})`
     
    }
  }
}
</script>